<template>
  <el-dialog
    title="购置申请"
    :visible.sync="dialog.show"
    :before-close="beforeClose"
    :close-on-click-modal="false"
  >
    <div class="form-container">
      <el-form :model="ziChan" ref="childForm" label-width="110px" :rules="rules">
        <el-form-item label="申请部室" prop="departmentId">
          <el-select  v-model="ziChan.departmentId">
            <el-option v-for="item in departmentList" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="购置类型" prop="zgtype">
          <el-input v-model.trim="ziChan.zgtype"></el-input>
        </el-form-item>

        <el-form-item label="资产名称" prop="ziChanMingCheng">
          <el-input v-model.trim="ziChan.ziChanMingCheng"></el-input>
        </el-form-item>

        <el-form-item label="规格型号" prop="guiGeXingHao">
          <el-input v-model.trim="ziChan.guiGeXingHao"></el-input>
        </el-form-item>

        <el-form-item label="数量" prop="shuLiang">
          <el-input-number v-model="ziChan.shuLiang" :min="1" :max="100"></el-input-number>
        </el-form-item>

        <el-form-item label="预算金额" prop="yuSuanJinE">
          <el-input v-model="ziChan.yuSuanJinE">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="申请日期" prop="zgtime">
          <el-date-picker
            style="width: 100%"
            v-model="ziChan.zgtime"
            type="date">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="购置理由" prop="reason">
          <el-input type="textarea" v-model.trim="ziChan.reason" :rows="3"></el-input>
        </el-form-item>

<!--        <el-form-item label="相关附件">
          <el-upload
            class="upload-demo"
            action="http://192.168.0.102:8002/api/fileUpload/upload?fileType=BaoXiaoFile"
            multiple
            :limit="10"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            :file-list="uploadFileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">文件大小请勿超过2MB</div>
          </el-upload>
        </el-form-item>-->

        <el-form-item label="审批人" prop="auditorIdList">
          <el-select v-model="ziChan.auditorIdList" multiple >
            <el-option v-for="item in userList" :value="item.value" :label="item.label" :key="item.value"></el-option>
          </el-select>
        </el-form-item>

<!--        <el-row>
          <el-col :span="11">
            <el-form-item label="申请部室" prop="departmentId">
              <el-select  v-model="ziChan.departmentId">
                <el-option v-for="item in departmentList" :label="item.departmentName" :value="item.departmentId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item label="购置类型" prop="zgtype">
              <el-input v-model.trim="ziChan.zgtype"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="资产名称" prop="ziChanMingCheng">
              <el-input v-model.trim="ziChan.ziChanMingCheng"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item label="规格型号">
              <el-input v-model.trim="ziChan.guiGeXingHao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="数量" prop="shuLiang">
              <el-input v-model="ziChan.shuLiang"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item label="预算金额" prop="yuSuanJinE">
              <el-input v-model="ziChan.yuSuanJinE"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="11">
            <el-form-item label="申请日期">
              <el-date-picker
                style="width: 100%"
                v-model="ziChan.zgtime"
                type="date">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item label="购置理由" prop="reason">
              <el-input type="textarea" v-model.trim="ziChan.reason" :rows="3"></el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="审批人">
          <el-select v-model="ziChan.auditorIdList" multiple >
            <el-option v-for="item in userList" :value="item.userId" :label="item.userNickname" :key="item.userId"></el-option>
          </el-select>
        </el-form-item>-->
      </el-form>
    </div>
    <div slot="footer">
      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="danger" @click="resetForm">重 置</el-button>
      <el-button
        type="success"
        @click="submitForm"
        :loading="changeLoading">保 存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import departmentAPI from '@/api/system/department'
  import userAPI from '@/api/system/user'
  import ziChanAPI from '@/api/ziChan/ziChan'
/*  import oaTemplateAPI from '@/api/system/oaTemplate'
  import draggable from 'vuedraggable'*/
  import { mapGetters } from 'vuex'
  // import simpleValidate from '@/utils/simpleValidate'

  export default {
    name: 'ZiChanSave',
/*    components: {
      draggable
    },*/
    data() {
      const numberValid = (rule,value,callback)=>{
        console.log(isNaN(parseFloat(value)))
        if(isNaN(parseFloat(value))){
          callback(new Error('预算金额只能是数字'))
        }else{
          callback()
        }
      }
      return {
        dialog:{
          show:false
        },
        // dialogShow:false,
        ziChan: {
          auditor: '',
          auditorIdList: [],
          beizhu: "",
          departmentId:'',
          guiGeXingHao: "",
          reason: "",
          shuLiang: "",
          signCount: '',
          yuSuanJinE: '',
          zgtime: '',
          zgtype: "",
          ziChanMingCheng: ""
        },
        uploadFileList: [],
        rules: {
          departmentId:[
            { required: true, message: '请选择申请部室', trigger: 'change' },
          ],
          zgtype:[
            { required: true, message: '请输入购置类型', trigger: 'blur' }
          ],
          ziChanMingCheng:[
            { required: true, message: '请输入资产名称', trigger: 'blur' }
          ],
          guiGeXingHao:[
            { required: true, message: '请输入规格型号', trigger: 'blur' }
          ],
          yuSuanJinE:[
            { required: true, message: '请输入预算金额', trigger: 'blur' },
            { validator: numberValid,trigger: 'blur'  }
          ],
          zgtime:[
            { required: true, message: '请选择申请日期', trigger: 'change' },
          ],
          reason:[
            { required: true, message: '请输入购置理由', trigger: 'blur' }
          ],

/*          waiChuShiYou: [
            { required: true, message: '请输入外出事由', trigger: 'blur' }
          ],
          startTime: [
            { required: true, message: '请选择外出开始时间', trigger: 'change' },
            { validator: dateValid, trigger: 'change' }
          ],
          endTime: [
            { required: true, message: '请选择外出结束时间', trigger: 'change' },
            { validator: dateValid, trigger: 'change' }
          ],*/
          auditorIdList: [
            { required: true, message: '请选择审批人', trigger: 'change' }
          ]

        },
        /*isShowDialog: false,*/
        userList: [],
        departmentList: [],
        changeLoading: false,

      }
    },
    computed: {
      ...mapGetters([
        'userId',
        'userNickname'
      ])
    },
    created() {
      this.getUserList()
      this.getDepartmentList()
    },
    methods: {
      getDepartmentList(){
        departmentAPI.getSelectList().then(res=>{
          this.departmentList = res.result
        })
      },
/*      getShenPiTemplateList() {
        oaTemplateAPI.getReceiptDocumentTemplateList().then(res => {
          this.shenPiTemplateList = res.result
        }).catch(err => {
          console.log(err)
        })
      },
      shenPiChange(val) {
        const el = this.getObjectByKey(val, this.shenPiTemplateList)
        this.draggableUserList = JSON.parse(JSON.stringify(el.userList))
      },
      removePerson(val) {
        for (let i in this.draggableUserList) {
          if (this.draggableUserList[i].value === val) {
            this.draggableUserList.splice(i, 1)
          }
        }
      },
      getObjectByKey(objectKey, arr) {
        for (const el of arr) {
          if (el.tid === objectKey) {
            return el
          }
        }
      },
      handleSuccess(res, file, fileList) {
        console.log(res, file, fileList)
      },*/

      close() {
        /*this.resetForm()*/
      },
      getUserList() {
        userAPI.getSelectList('').then(res => {
          this.userList = res.result
        })
      },
      saveOrUpdate() {
        this.changeLoading = true
        const promise = this.ziChan.ziChanId ? ziChanAPI.update(this.ziChan) : ziChanAPI.save(this.ziChan)
        promise.then(res => {
          this.changeLoading = false
          this.$message.success('保存成功')
          this.dialog.show = false
          this.resetForm()
          this.$emit('update')
        })

      },
      beforeClose(done) {
        this.resetForm()
        done(true)
      },

      open(id) {
        this.dialog.show = true
        if(id){
          // getbyid
        }
        // this.ziChan.zgtime = new Date()
      },
      resetForm() {
        this.$refs['childForm'].resetFields()
      },
      submitForm() {
        this.$refs['childForm'].validate(valid => {
          if (valid && !this.changeLoading) {
            this.saveOrUpdate()
          }
        })
      },
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.info('文件大小请勿超过 2MB!')
        }
        return isLt2M
      },
      uploadSuccess(res, file){
        this.baoXiao.fileList.push(res.result)
      },
      handleRemove(file){
        const fileId = file.fileId
        for(let i in this.baoXiao.fileList){
          const el = this.baoXiao.fileList[i]
          if(el.fileId === fileId){
            this.baoXiao.fileList.splice(i,1)
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .list-move {
    transition: transform 0.3s linear;
  }

  .icon {
    font-size: 20px;
    /*background-color: #F5F7FA;*/
    /*cursor: pointer;
    transition: transform 0.3s;*/

    /*&:hover {
      transform: scale(1.1);
    }*/
  }

  .row-1 {
    margin-bottom: 20px;
  }

  .user-list-container {
    border: 1px solid #e0e0e0;

    li {
      line-height: 40px;
      border-bottom: 1px dashed #eee;
      display: flex;
      justify-content: space-between;
      user-select: none;
      cursor: move;
      padding: 0 10px;

      &:hover {
        background-color: #f3f3f3;
      }

      p:first-of-type {
        i {
          margin-right: 10px;
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }

      p:last-of-type {
        i {
          vertical-align: middle;
        }
      }
    }
  }

</style>
